<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="/static/css/index.css" rel="stylesheet">
<title>登录</title>
<style type=text/css>
.fileinput-button {
	position: relative;
	display: inline-block;
	overflow: hidden;
}

.fileinput-button input {
	position: absolute;
	left: 0px;
	top: 0px;
	opacity: 0;
	-ms-filter: 'alpha(opacity=0)';
}

.round_icon {
	width: 100px;
	height: 100px;
	display: flex;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-left: 50px;
}

.round_new_icon {
	width: 100px;
	height: 100px;
	display: flex;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-left: 50px;
}
</style>
<link rel="stylesheet"
	href="https://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script
	src="https://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
</head>
<body>

	<div class="login pr f16">
		<div class="pa cont bgf" style="height: 600px;">
			<h2 class="pa title cf fn">智慧通行管理系统</h2>
			<div class="fl left f14">
				<form action="/web/userregister" method="post"
					id="regis" enctype="multipart/form-data">
					<div
						style="width: 100px; height: 100px; margin-left: 70px; margin-top: -30px;">
						<span class="fileinput-button" id="input"> <img
							src="/static/images/touxiang.png" id="jpg" class="round_icon">
							<input type="file"
							style="width: 100px; height: 100px; margin-left: 50px;"
							id="imginput" name="uImg" accept=".jpg" />
						</span>
					</div>
					<div>
						<span style="margin-left: 50px;">点击上方图标选择人脸头像</span>
					</div>
					<div class="border input">
						<span style="width: 90px;">姓名</span> <input type="text"
							name="uName" placeholder="请输入姓名" id="uname" />
					</div>
					<div class="border input" style="margin-top: -10px">
						<span style="width: 90px;">手机号码</span> <input type="text"
							name="uTel" style="width: 120px" id="tel" />
					</div>
					<div class="border input" style="margin-top: -10px">
						<span style="width: 90px;">手机验证码</span> <input id="code"
							type="text" placeholder="请输入验证码" style="width: 120px" />
						<button id="codebutt" type="button" onclick="getcode();"
							style="width: 70px; height: 37px; color: #F5F5F5">获取验证码</button>
					</div>
					<div class="border input" style="margin-top: -10px">
						<span style="width: 90px;">密码</span> <input type="password"
							name="uPwd" id="pwd" style="width: 120px" />
					</div>
					<div class="border input" style="margin-top: -10px">
						<span style="width: 90px;">确认密码</span> <input type="password"
							 id="ispwd" style="width: 120px" />
					</div>
			</div>
			<div class="fr right">
				<h3 style="margin-left: 100px;">公司信息</h3>
				<div class="border input" style="margin-left: -30px;">
					<span style="width: 90px;">公司名称</span> <input id="cname"
						placeholder="请输入公司名称" name="cName" />
				</div>
				<div class="border input"
					style="margin-left: -30px; margin-top: -10px;">
					<span style="width: 90px;">公司地址</span> <input id="cad" type="text"
						placeholder="请输入公司地址" name="cAddress" />
				</div>
			</div>
			<div class="mt20" style="margin-top: -1px">
				<button type="submit" class="cf f16 submit" style="margin-top: 5px">注册</button>
			</div>
			</form>
		</div>
	</div>
	<p class="name pa cf">Copyright ©2019 深圳易威胜科技有限公司 All Rights
		Reserved</p>



	<script src="/static/js/jq-slideVerify.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(function() {
			$("#imginput").change(function(e) {
				var imgBox = e.target;
				uploadImg($('#imginput'), imgBox)
			});
			var is;
			function uploadImg(element, tag) {
				var file = tag.files[0];
				var imgSrc;
				if (file.type != "image/jpeg") {

					alert("请选择人脸头像！");
					is = false;
					return false;
				}
				var reader = new FileReader();
				reader.readAsDataURL(file);
				if (is != false) {
					reader.onload = function() {
						console.log(this.result);
						imgSrc = this.result;
						var imgs = document.createElement("img");
						$(imgs).attr("src", imgSrc);
						$(imgs).attr("class", "round_new_icon");
						$(imgs).attr("id", "jpg");
						$("#jpg").remove();
						$("#input").prepend(imgs);
					};
				}
			}
		});
		var codenum;
		function getcode() {
			var tel = $("#tel").val();
			if (tel.length == 11) {
				$.ajax({
					url : "https://lyunz.top/web/verificationCode/" + tel,
					success : function(response) {
						console.log(response.data);
						if (response.success) {
							codenum = response.data;
							var code = $("#codebutt");
							code.attr("disabled", "disabled");
							setTimeout(function() {
								code.css("opacity", "0.8");
							});
							var time = 60;
							var set = setInterval(function() {
								code.html("(" + --time + ")秒后重新获取");
							}, 1000);
							setTimeout(function() {
								code.attr("disabled", false).html("重新获取验证码");
								clearInterval(set);
							}, 60000);

						} else {
							if (response.errCode == 001) {
								alert("手机号码已被注册，请重新输入或直接登录");
							}
						}

					}
				});
			} else {
				alert("请输入正确的手机号码");
			}
			$("#code").blur('input propertychange', function() {
				var inputcode = $("#code").val();
				if (inputcode != codenum) {
					alert("验证码输入错误");
				}
			});
		}
		$.fn.validate = function(tips) {
			var is = false;
			if ($(this).val() == "" || $.trim($(this).val()).length == 0) {
				alert(tips + "不能为空！");
			} else {
				is = true;
			}
			return is;
		}
		$.fn.is = function() {
			var is = false;
			if ($(this).val() == "" || $.trim($(this).val()).length == 0) {
				alert("请选择人脸头像！");

			} else {
				is = true;
			}
			return is;
		}

		function pwd() {
			var pwd = $("#pwd").val();
			var ispwd = $("#ispwd").val();
			var is = false;
			if (pwd == ispwd && $(pwd != "" || pwd.length != 0)
					&& (ispwd != "" || ispwd.length != 0)) {
				is = true;
				return is;
			} else {
				alert("密码与确认密码不一致！");
				return is;
			}
		}

		$('#regis').submit(
				function() {
					var result = false;
					if ($("#imginput").is() == true
							&& $("#uname").validate("姓名") == true
							&& $("#tel").validate("电话") == true
							&& $("#code").validate("验证码") == true
							&& $("#pwd").validate("密码") == true
							&& $("#ispwd").validate("确认密码") == true
							&& $("#cname").validate("公司名称") == true
							&& $("#cad").validate("公司地址") == true
							&& pwd() == true) {
						result = true;
					}
					if (result == false) {
						return false;
					}

				});
	</script>
	<script src="/static/js/common.js" type="text/javascript"></script>
</body>
</html>